<html>
<head>
<style>

table.mainTable{
	width:100%;
	height:100%;
	border:solid 0px #CC3299;
}

table.mainTable td{
	vertical-align:top;
	padding:2px;
}

table.dataList{
	width:100%;
	border-collapse: collapse;
	border:solid 0px;
	padding:2px;
	
}

table.dataList tr th{
	background-color:#000000;
	color:rgb(187,187,187);
	border-bottom:solid 1px white;
}

table.dataList tr td{
	color:rgb(89,89,89);
}

table.dataList tr.oddRow{
	background-color:rgb(201,201,201);
}

table.dataList tr.evenRow{
	background-color:rgb(229,229,229);
}

div.mapDiv{
	width:100%;
	height:350px;
	border:solid 0px;
}

div.titleArea{
	width:100%;
	height:25px;
	color:rgb(91,91,91);
	font-size: 1.3em;
	border:solid 3px rgb(230,230,230);
	text-align:left;
	vertical-align:middle;
  background: -webkit-linear-gradient(rgb(251,251,251), rgb(240,240,240)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(rgb(251,251,251), rgb(240,240,240)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgb(251,251,251), rgb(240,240,240)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgb(251,251,251), rgb(240,240,240)); /* Standard syntax */
}

div.dataArea{
	width:100%;
	height:calc(100% - 40px);
	border:solid 3px rgb(230,230,230);
}

div.detailDiv{
	width:100%;
	height:calc(100% - 350px);
	border:solid 0px;
}
</style>
</head>
<body>
<table class="mainTable">
		<col style='width:450px;'/>
		<col style='width:calc(100% - 450px);'/>
	<tr>
		<td>
			<div class='titleArea'>
				Incoming Alert
			</div>
			<div class='dataArea'>
				<table class="dataList">
					<tr>
						<th>Type</th>
						<th>Time</th>
						<th>Date</th>
						<th>Location</th>
						<th>City</th>
						<th>Name</th>
					</tr>
					
					<tr class='oddRow'>
						<td>SOS</td>
						<td>03:42</td>
						<td>9/5/14</td>
						<td>1301 E. Lookout Dr</td>
						<td>Allen</td>
						<td>Todd G.</td>
					</tr>
					
					<tr class='evenRow'>
						<td>CALL</td>
						<td>09:42</td>
						<td>9/5/14</td>
						<td>1062 Big Spring Dr.</td>
						<td>Plano</td>
						<td>Guy W.</td>
					</tr>
					
					<tr class='oddRow'>
						<td>SOS</td>
						<td>03:42</td>
						<td>9/5/14</td>
						<td>1301 E. Lookout Dr</td>
						<td>Allen</td>
						<td>Todd G.</td>
					</tr>
					
					<tr class='evenRow'>
						<td>CALL</td>
						<td>09:42</td>
						<td>9/5/14</td>
						<td>1062 Big Spring Dr.</td>
						<td>Plano</td>
						<td>Guy W.</td>
					</tr>
					
				</table>
			</div>
		</td>
		<td>
			<div class='mapDiv'>
				<div class='titleArea'>
					Alert Location
				</div>
				<div class='dataArea'>
					<img src='./../images/SFMap.png' style='width:100%;height:100%;'>
				</div>
			</div>
			<div class='detailDiv'>
				<div class='titleArea'>
					Detail Information
				</div>
				<div class='dataArea'>
					detail data
				</div>
			</div>
		</td>
	</tr>
</table>
</body>
</html>